<template>
  <div class="tag-table">
    <template v-if="list.length">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="overview-chart" id="album-chart"></div>
        </el-col>
        <el-col :span="16">
          <ul>
            <li v-for="item in list" :key="item.dataAssetId">
              <el-row :gutter="20">
                <el-col :span="1">
                  <div><icon-svg name="iconAlbum" class="typeIcon"></icon-svg></div>
                </el-col>
                <el-col :span="17">
                  <div>
                    <span class="click-item" @click="gotoDetial(item)">
                      {{ item.albumNm }}
                    </span>
                  </div>
                </el-col>
                <el-col :span="6" align="right">{{ item.albumDesc }}</el-col>
              </el-row>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right"><span class="click-item" @click="more">查看更多</span></el-col>
      </el-row>
    </template>
    <template v-else>
      <div class="no-records">
        <img src="../img/no-records.png" />
        <p>我还没有创建过数据专辑，快去试试吧！</p>
        <el-button @click.native="$refs.albumDialog.showDrawer()">创建我的第一个数据专辑</el-button>
      </div>
    </template>
    <album-dialog ref="albumDialog" @callback="getInfo"></album-dialog>
  </div>
</template>

<script>
import albumDialog from '../album/album-edit-drawer'
import market from '../utils/market.js'
import * as echarts from 'echarts'
export default {
  components: {
    albumDialog
  },
  data() {
    return {
      list: [],
      albumChart: null
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/albumList'),
        method: 'get',
        params: this.$ajax.setParams({
          currentPageNum: 1,
          pageSize: 5,
          queryParams: {
            userId: this.$store.state.user.id
          }
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          if (this.list.length) this.getChart()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getChart() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/userAlbum'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$nextTick(() => this.setChart(data.data))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setChart(data) {
      if (!this.albumChart) {
        this.albumChart = echarts.init(document.getElementById('album-chart'))
        window.addEventListener('resize', () => {
          this.albumChart.resize()
        })
      }
      let xAxis = []
      let odata = []
      // let ddata = []
      let cdata = []
      data.sort((a, b) => {
        return a.openLevel > b.openLevel ? 1 : -1
      })
      data.forEach(v => {
        xAxis.push(this.$dict('album_open_level')[v.openLevel])
        odata.push(v.albumNum)
        // ddata.push(v.apiNum)
        cdata.push(v.countNum)
      })
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 10,
          top: 0,
          data: ['专辑数量', 'API数量', '总数量']
        },
        grid: {
          top: '15%',
          left: 0,
          right: '20%',
          bottom: 0,
          containLabel: true
        },
        calculable: true,
        color: ['#6156e4', '#4fa8f9', '#bd5ee9'],
        xAxis: [
          {
            name: '(公开等级)',
            type: 'category',
            axisTick: {
              show: true
            },
            data: xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            interval: 1,
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            name: '专辑数量',
            type: 'bar',
            barWidth: 14,
            stack: 'album',
            data: odata
          },
          // {
          //   name: 'API数量',
          //   type: 'bar',
          //   barWidth: 14,
          //   stack: 'album',
          //   data: ddata
          // },
          {
            name: '总数量',
            type: 'bar',
            barWidth: 14,
            data: cdata
          }
        ]
      }
      this.albumChart.setOption(option)
      this.albumChart.resize()
    },
    gotoDetial(item) {
      let routeName = market.typeToRoute(Number(3))
      this.$blank(routeName, { params: { id: item.assetAlbumId } })
    },
    more() {
      this.$blank('market-album-list')
    }
  }
}
</script>

<style lang="scss"></style>
